<template>
  <div class="app-container">
    <header>
      <div class="_header">
        <el-form inline :model="initParams1" class="demo-form-inline" size="small">
          <el-form-item label="姓名">
            <el-input v-model="initParams1.name" placeholder="输入账号或姓名" clearable @keyup.enter.native="getAccountList" />
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="initParams1.jxid" placeholder="输入驾校ID或驾校名" clearable
              @keyup.enter.native="getAccountList" />
          </el-form-item>
          <el-form-item label="城市">
            <el-select v-model="initParams1.cityCode" placeholder="不限" @change="changeSlect" clearable>
              <el-option :label="c.areaName" :value="c.areaCode" v-for="(c, index) in cityArr" :key="index" />
            </el-select>
          </el-form-item>

          <el-form-item label="3个月有效期限">
            <el-select v-model="initParams1.threeMonth" placeholder="不限" clearable  @change="termChange">
              <el-option label="不限" value="不限"></el-option>
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="SeekHandler" icon="el-icon-search">查询</el-button>
            <el-button type="primary" @click="addHandler(0)" icon="el-icon-plus">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
    </header>
    <main>
      <div class="_main">
        <el-table :data="tableData" stripe border style="width: 100%" height="100%">
          <el-table-column fixed prop="userno" label="用户名" width="150" align="center">
            <template slot-scope="scope">
              <span style="color: #4d4de2;cursor: pointer;" @click="editUserInfo(scope.row, 1)">{{
                scope.row.userno }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed prop="name" label="姓名" width="150" align="center">
               <template slot-scope="scope">
                <span style="color: #4d4de2;cursor: pointer;" @click="go(scope.row,'http://jx.qida999.com/DriverCommon/system/loger.aspx')">
                  {{ scope.row.name }}
                </span>
              </template>
          </el-table-column>

          <el-table-column label="内部账号" align="center" width="120">
            <template slot-scope="scope">
               <el-checkbox v-model="scope.row.isUsed" :disabled="true"></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column prop="jxID" label="驾校ID" width="120" align="center">
            <template slot-scope="scope">
              <span style="color: #4d4de2;cursor: pointer;"
                @click="go2(scope.row,'http://jx.qida999.com/DriverCommon/system/DrJx.aspx')">{{
                  scope.row.jxID }}</span>
            </template>
          </el-table-column>
            <el-table-column prop="city" label="城市" width="150" align="center" />
          <el-table-column prop="jxName" label="驾校" width="200" align="center" />
          <el-table-column prop="dep" label="部门" align="center" width="120" />
          <el-table-column prop="ep" label="备注" width="290" align="center" />
          <el-table-column prop="tel" label="电话" width="150" align="center" />
          <el-table-column label="账号启用" align="center" width="120">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isQD" :disabled="true"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="有效期" width="200" align="center">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 5px">{{ scope.row.LastDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="170" fixed="right">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" class="el-icon-delete" plain
                @click="deleteHandler(scope.$index, scope.row)">删除</el-button>
              <el-button type="warning" size="mini" plain class="el-icon-edit"
               @click="editHandler(scope.$index, scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </main>


    <footer>
      <div class="pagin">
        <el-pagination background :current-page="initParams1.page" :page-sizes="[20, 50, 100, 150]"
          :page-size="initParams1.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </footer>


    <div class="dialog">
      <el-dialog :title="diaLogTitle" :visible.sync="isDiaLog" width="50%" :close-on-click-modal="false">
        <el-form :model="fromData" inline size="small">
          <el-form-item label="用户名" :label-width="dialogfromlabelWidth">
            <el-input v-model="fromData.userno" placeholder="请输入用户名" clearable></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="dialogfromlabelWidth">
            <el-input v-model="fromData.passwd" placeholder="请输入新密码" clearable></el-input>
          </el-form-item>
          <el-form-item label="姓名" :label-width="dialogfromlabelWidth">
            <el-input v-model="fromData.toAddUserName" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="dialogfromlabelWidth">
            <el-input v-model="fromData.tel" placeholder="请输入电话" clearable></el-input>
          </el-form-item>
          <el-form-item label="部门" :label-width="dialogfromlabelWidth">
            <el-input v-model="fromData.dep" placeholder="请输入部门" clearable></el-input>
          </el-form-item>
          <el-form-item label="登录模式" :label-width="dialogfromlabelWidth">
            <el-select v-model="fromData.isMulti" placeholder="" @change="isMultiChange">
              <el-option label="单点登录" value="0"></el-option>
              <el-option label="多点登录" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="有效期" :label-width="dialogfromlabelWidth">
            <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择账号有效期" v-model="fromData.lastDate"
              style="width: 94%;"></el-date-picker>
          </el-form-item>

          <el-form-item label="备注" :label-width="dialogfromlabelWidth">
            <el-input v-model="fromData.ep" placeholder="请留言备注" clearable></el-input>
          </el-form-item>
          <el-form-item label="启用" :label-width="dialogfromlabelWidth">
            <el-checkbox v-model="fromData.isUsed">启用中</el-checkbox>
          </el-form-item>


          <el-form-item label="驾校ID" :label-width="dialogfromlabelWidth">
            <el-input v-model="fromData.JxID" placeholder="请输入驾校ID" clearable
              :disabled="diaLogState == 0 ? false : true"></el-input>
          </el-form-item>
          <el-form-item label="--" label-width="90px" v-if="diaLogState" style="text-align: center;" class="jxName">
            <el-input v-model="fromData.jxName" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="修改人" v-if="diaLogState" :label-width="dialogfromlabelWidth">
            <el-input placeholder="" disabled v-model="fromData.editer"></el-input>
          </el-form-item>

          <el-form-item label="修改IP" v-if="diaLogState" :label-width="dialogfromlabelWidth">
            <el-input placeholder="" v-model="fromData.editip" clearable disabled></el-input>
          </el-form-item>

          <el-form-item label="IPPush判断" label-width="120px">
            <el-checkbox v-model="fromData.IPPushCheck">登录此账号需判定IPPush（局域网48小时内IPPush记录）</el-checkbox>
          </el-form-item>
          <el-form-item label="企达内部员工账号" label-width="138px">
            <el-checkbox v-model="fromData.isQD">勾选将对客户隐藏</el-checkbox>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isDiaLog = false; clearObj()">关 闭</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { AccountManageAPI, CityListAPI } from "@/api/adminstare";
import { Message } from "element-ui";

/**
 * @author        Yng
 * @time          2023-10-27 09:11:30  星期五
 * @description   后台管理
 **/

export default {
  data() {
    return {
      // 城市列表
      cityArr: [],
      // 账号列表数据
      tableData: [],
      // 账号列表初始化参数
      initParams1: {
        action: "logerAdminList",
        page: 1,
        pageSize: 20,
        cityCode: "不限",//城市
        threeMonth: "不限",//三个月有效期
        name: "",
        jxid: "",
      },
      // 分页总条数
      total: 0,

      // 用户新增的基本资料
      fromData: {
        action: 'logerAdminAdd',
        lastDate: '',//有效期
        userno: '',//用户名
        passwd: '',//密码
        toAddUserName: '',//姓名
        dep: '',//部门
        isMulti: '0',//登录模式：0-单点登录，1-多点登录
        isUsed: '0',// 启用，1-启用中，0-未启用
        isQD: '0',// 企达内部员工账号，0-否，1-是
        tel: '',//电话
        IPPushCheck: true,//IPPush判断，1-登录此账号需判定IPPush(局域网48小时内IPPush记录)，0-不判断
        ep: '',//备注
        JxID: '',//需要新增的账号所在驾校ID
        editip: '',//修改ip
      },
      // 是否展示对话框
      isDiaLog: false,
      dialogfromlabelWidth: '90px',
      diaLogState: 0,//0表示新增 1表示修改
      diaLogTitle: '新增账号基本资料',//新增和修改弹窗title

    };
  },
  async created() {
    this.getAccountList();

    // 获取城市列表
    this.cityArr = this.$store.state.commonData.cityArr
    if (this.cityArr.length<1) {
      const result = await this.$store.dispatch('commonData/getCityList')
      this.cityArr = result
    }
  },
  methods: {
    // 三个月有效期下拉框发生变化
    termChange(e) {
      this.initParams1.threeMonth = e
      this.getAccountList()
    },
    // 新增/修改保存
    async save() {
      try {
        // 新增
        let newData = {}
        newData.IPPushCheck = this.fromData.IPPushCheck ? '1' : '0'
        newData.isUsed = this.fromData.isUsed ? '1' : '0'
        newData.isQD = this.fromData.isQD ? '1' : '0'
        newData.toAddUserno = this.fromData.userno
        const data = { ...this.fromData, ...newData }
        data.action = 'logerAdminAdd'

        //区分修改
        if (this.diaLogState == 1) {
          data.action = 'logerAdminModify'
          data.toModifyUserno = this.fromData.userno
          data.toModifyUserName = this.fromData.toAddUserName
          newData.isMulti = this.fromData.isMulti ? '1' : '0'
        }

        const result = await AccountManageAPI(data)

        this.$message({
          message: result.data,
          type: 'success'
        });
        this.isDiaLog = false
        this.getAccountList();//刷新表格数据

      } catch (error) {
        console.log(error);
      }
    },
    // 登录模式发生变化
    isMultiChange(e) {
      this.fromData.isMulti = e
    },
    // 获取账号列表数据
    async getAccountList() {
      const { code, data, total } = await AccountManageAPI(this.initParams1);
      if (!code) {
        this.tableData = data;
        this.total = total
      }
    },
    // 删除
    deleteHandler(index, row) {
      this.tableData.splice(index, 1);
      Message({
        message: '删除成功',
        type: 'success',
      })
    },
    // 编辑 跳转到用户账户设置页面
    editHandler(index, row) {
      this.$router.push({ path: '/adminSystem/main/accountInfo', query: { userno: row.userno } })
    },
    // 查询使用节流防止用户频繁点击
    SeekHandler: _.throttle(function () {
      this.getAccountList()
    }, 2000, { 'trailing': false }),
    // 新增
    addHandler(num) {
      for (let prop in this.fromData) {
        if (this.fromData.hasOwnProperty(prop)) {
          this.fromData[prop] = null;
        }
      }

      this.diaLogState = num
      this.diaLogTitle = '新增账号基本资料'
      this.isDiaLog = true
    },
    // 编辑用户信息
    editUserInfo(val, num) {
      this.diaLogState = 1 //区分是新增还是修改

      this.fromData.userno = val.userno || ''
      this.fromData.toAddUserName = val.name || ''
      this.fromData.dep = val.dep || ''
      this.fromData.editer = val.editer + ' ' + val.edittime
      this.fromData.isUsed = val.isUsed || ''
      this.fromData.tel = val.tel || ''
      this.fromData.jxName = val.jxName || ''
      this.fromData.JxID = val.jxID || ''
      this.fromData.ep = val.ep || ''
      this.fromData.lastDate = val.LastDate || ''
      this.fromData.isQD = val.isQD || ''
      this.fromData.isMulti = val.isMulti ? '1' : '0'
      this.fromData.editip = val.editip || ''


      this.diaLogTitle = '修改账号基本资料'
      this.isDiaLog = true

    },
    // 城市列表code值
    changeSlect(AddressVal) {
      this.initParams1.cityCode = AddressVal

      this.getAccountList()
    },
    // 一页几条数据
    handleSizeChange(val) {
      this.initParams1.pageSize = val || 20
      this.getAccountList();
    },
    // 当前页
    handleCurrentChange(val) {
      this.initParams1.page = val || 1
      this.getAccountList();
    },
    // 关闭新增/修改弹窗 
    clearObj() {
      // 将弹窗里面的内容清空
      for (const key in this.fromData) {
        this.fromData[key] = ''
      }
    },
    // 点击姓名 跳转到旧页面
    go(userno, URL) {
      const redirectUrl = `${URL}?userno=${userno.userno}`
      this.$oldLoginSystem(redirectUrl)
    },
    // 点击驾校ID/点击姓名 跳转到旧页面
    go2(JxID ,URL) {
      const jxID= JxID.jxID
      const redirectUrl = `${URL}?JxID=${jxID}`
      this.$oldLoginSystem(redirectUrl)
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .jxName .el-form-item__label {
  text-align: center !important;
}

.app-container {
  background-color: white;

  ._header {
    ::v-deep .el-form {
      display: flex;
      justify-content: space-between;
    }
  }

  ._main {
    height: 690px;
  }

  .dialog {
    .dialog-footer {
      display: flex;
      justify-content: center;
    }

    // ::v-deep.el-input {
    //   width: 260px;
    // }
  }
}</style>
